<template>
  <table>
    <thead>
      <th>序号</th>
      <th>书籍名称</th>
      <th>出版日期</th>
      <th>价格</th>
      <th>购买数量</th>
      <th>操作</th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in books" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.date }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="minus(index)">-</button>
          <span class="counter">{{ item.count }}</span>
          <button @click="add(index)">+</button>
        </td>
        <td><button @click="deleteBook(index)">删除</button></td>
      </tr>
    </tbody>
  </table>
  <h2>总价格:{{ total }}</h2>
</template>

<script setup>
import { ref, computed } from 'vue';

const books = ref([
  {
    id: 1,
    name: '《算法导论》',
    date: '2006-9',
    price: 85.0,
    count: 1,
  },
  {
    id: 2,
    name: '《UNIX编程艺术》',
    date: '2006-2',
    price: 59.0,
    count: 1,
  },
  {
    id: 3,
    name: '《编程珠玑》',
    date: '2008-10',
    price: 39.0,
    count: 1,
  },
  {
    id: 4,
    name: '《代码大全》',
    date: '2006-3',
    price: 128.0,
    count: 1,
  },
]);

const total = computed(() => {
  return books.value.reduce((sum, item) => sum + item.price * item.count, 0);
});

const add = (index) => {
  books.value[index].count += 1;
};

const minus = (index) => {
  if (books.value[index].count === 0) return;
  books.value[index].count -= 1;
};

const deleteBook = (index) => {
  books.value.splice(index, 1);
};
</script>

<style lang="css" scoped>
table {
  margin: 100px auto;
  border-collapse: collapse;
  border: 1px solid #aaa;
}

th,
td {
  padding: 8px 16px;
  border: inset;
}

.counter {
  margin: 0 5px;
}
</style>
